<template>
  <div class="addtwo">
    <hunk-head name="添加房源"></hunk-head>
    <div class="addList">
      <div class="list-input">
        <div class="list-item">
          <div class="leftlable">小区名称</div>
          <div class="check">
            <!-- <input type="text" placeholder="请选输入小区名称" v-model="list.communityname"> -->
            <uni-combox label="" :candidates="candidates" placeholder="请选输入小区名称" v-model="list.communityname" @input="comboxInput"></uni-combox>
          </div>
        </div>
        <div class="list-item">
          <div class="leftlable">楼栋号</div>
          <div class="check">
            <input type="text" placeholder="请选输入楼栋号" v-model="list.building">
          </div>
        </div>
        <div class="list-item">
          <div class="leftlable">单元号</div>
          <div class="check">
            <input type="text" placeholder="请选输入单元号" v-model="list.unit">
          </div>
        </div>
        <div class="list-item">
          <div class="leftlable">门牌号</div>
          <div class="check">
            <input type="text" placeholder="请选输入门牌号" v-model="list.housenumber">
          </div>
        </div>
      </div>
      <div class="tips">
        <img v-if="baseUrl" :src="baseUrl+'house/smalhouse.png'" >
        <p>房屋地址： {{previous.province}}{{previous.city}}{{previous.area}}</p>
      </div>
      <div v-if="!info" class="bextBtn" @click="addhouse">完成</div>
      <div v-else class="bextBtn" @click="edithouse">完成</div>
    </div>
  </div>
</template>

<script>
import Head from '@componentsMine/head'
import {debounce} from 'lodash'
import { addHouse, checkCommunity, updateHouseAddress } from '@/apis/housesInfo'
export default {
  components: {
    'hunk-head': Head
  },
  data() {
    return {
      list: {
        communityname: '',
        building: '',
        unit: '',
        housenumber: ''
      },
      candidates:[],
      previous: null,
      commLike: '',
      isflag: true,
      timer: null,
      info: null
    }
  },
  onLoad(e){
    let arr = JSON.parse(e.query)
    console.log(7777,arr)
    if(arr.info){
      // province: '请选择所在省份',
      //   city: '请选择所在城市',
      //   area: '请选择所在区域',
      console.log('编辑进来的',arr.info)
      this.previous = arr.list
      this.info = arr.info
      if(this.info.province == this.previous.province && this.info.city == this.previous.city && this.info.area == this.previous.area){
        this.list.communityname = this.info.communityname
        this.list.building = this.info.building
        this.list.unit = this.info.unit
        this.list.housenumber = this.info.housenumber
      }
    }else{
      this.previous = arr
    }
    
  },
  computed: {
    baseUrl() {
      return process.env.VUE_APP_BASE_IMG_URL;
    },
    userid(){
      return this.$store.state.baseStore.userInfo.userid
    }
  },
  methods: {
    comboxInput(e){
      this.commLike = e
      let re = /[\u4E00-\u9FA5]/g
      if(re.test(e)){
        if(e.match(re).length >= 2){
          if(!this.isflag) return
          this.isflag = false
          let that = this
          this.timer = setTimeout(function(){
            that.isflag = true
            that.checkCommunity()
          },1000)
        }
      }
    },
    checkCommunity(){
      const data = { ...this.previous, commLike: this.commLike}
      checkCommunity(data).then(res=>{
        if(res.code == 200 && res.data){
         this.candidates = res.data.map((item, idx) =>{
           return item.communityname
          })
        }
      })
    },
    addhouse:debounce(function(){
      let that = this
      for(let key in this.list){
        if(this.list[key] == ''){
          uni.showToast({
            title: '请填写完整！',
            icon: 'error'
          })
          return
        }
      }
      const data  = { ...this.list, ...this.previous, communityid:0, houseid:0,userid:this.userid }
      addHouse(data).then(res=>{
        if(res.code == 200){
          uni.showToast({
            title: "添加成功",
            // image: this.baseUrl+'house/smalhouse.png'
            // duration: ''
          })
          setTimeout(()=>{
            console.log(9999,'跳转')
            // uni.navigateBack({ delta: 2 }
              let data = {
                houseid: res.data.houseid,
                address: res.data.address
              }
              uni.navigateTo({ url: '/pages/manage/houseList/commponents/detail?query='+ JSON.stringify(data) })
          },1000)
        }else{
          uni.showToast({
            title: res.msg,
            icon:'none'
            // icon:'error'
            // image: this.baseUrl+'house/smalhouse.png'
            // duration: ''
          })
        }
      })
    },1000),
    edithouse:debounce(function(){
      console.log('编辑过来的',this.info)
      let that = this
      // let pages = getCurrentPages();  //获取所有页面栈实例列表
      // let prevPage = pages[ pages.length - 3];  //上二页页面实例
      // prevPage.$vm.houseDetail= {
      //   houseid: 131,
      //   address: '牛皮洗哦啊去'
      // }
      const data  = { ...this.list, ...this.previous,wid: this.info.wid}
      updateHouseAddress(data).then(res =>{
        if(res.code == 200){
          uni.showToast({
            title: "编辑成功",
            success: function(){
              uni.navigateBack({  
                delta: 2
              })
            }
          })
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    },1000)
  }
}
</script>

<style lang="scss" scoped>
.addtwo {
  @include num();
  background: #F9F9F9;
  .addList{
    padding: 0 15px;
    .list-input{
      .list-item{
        height: 44px;
        border-bottom: 2px solid #EFEFEF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .leftlable{
          height: 44px;
          font-size: 15px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          line-height: 44px;
        }
        .check{
          width: 50%;
          height: 44px;
          font-size: 14px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #9B9B9B;
          line-height: 44px;
          ::v-deep uni-input {
            height: 44px;
          }
          ::v-deep input::placeholder,.uni-input-placeholder{
              height: 44px;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #9B9B9B;
              line-height: 44px;
              text-align: right;
            }
          ::v-deep input,.uni-input-input{
              height: 44px;
              font-size: 14px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #4a4a4a;
              line-height: 44px;
              text-align: right;
            }
        }
      }
    }
    .tips{
      margin: 10px 0 20px 0;
      height: 20px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      p{
        display: inline-block;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #9B9B9B;
        line-height: 20px;
        text-align: right;
        vertical-align: middle;
        
      }
      img{
        width: 14px;
        height: 15px;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
    .bextBtn{
      width: 345px;
      height: 45px;
      background: linear-gradient(315deg, #FFAA58 0%, #FFBD6C 100%);
      box-shadow: 0px 2px 4px 0px rgba(252, 174, 55, 0.21), 0px 3px 5px 0px rgba(255, 216, 111, 0.14);
      border-radius: 100px;
      text-align: center;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #FFFFFF;
      line-height: 45px;
      text-shadow: 0px 2px 4px rgba(252, 174, 55, 0.21);
      &::after{
        border: 0;
      }
    }
    
  }
}
::v-deep .uni-combox{
  border: 0;
  padding: 0;
  .uni-input-input{
    text-align: right;
  }
  .uni-combox__label{
    display: none;
  }
  .uni-combox__input{
    text-align: right;
  }
}
</style>
